import React, { Component } from "react";
import "../css/index.css";
import { Icon, Row, Col } from "antd";
import { NavLink } from "react-router-dom";
import { classify } from "./classify.json";
class Classify extends Component {
  render() {
    return (
      <div>
        <header className="cla-header">
          <NavLink to="/">
            <div className="flex">
              <div className="cla-fh">
                <Icon className="cla-fh-icon" type="left" />
              </div>
              <span className='span'>分类</span>
            </div>
          </NavLink>
          <div className="flex">
            <div className="flex-margin">
              <Icon type="search" />
            </div>
            <div className="flex-margin">
              <Icon type="menu" />
            </div>
          </div>
        </header>
        <main>
          <div className="cla-title">
            <h3>女生频道</h3>
          </div>
          <Row>
            {classify.map(item => {
              return (
                <Col span={12} key={item.id}>
                  <div className="cla-book">
                    <img className="cla-book-img" src={item.img} alt="" />
                    <div>
                      <h4>{item.span}</h4>
                      <p>
                        <em>{item.number}本</em>
                      </p>
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
          <div className="cla-title">
            <h3>男生频道</h3>
          </div>
          <Row>
            {classify.map(item => {
              return (
                <Col span={12} key={item.id}>
                  <div className="cla-book">
                    <img className="cla-book-img" src={item.img} alt="" />
                    <div>
                      <h4>{item.span}</h4>
                      <p>
                        <em>{item.number}本</em>
                      </p>
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
        </main>
        <footer>
          <div className="cla-footer">
            <div>
              <div className="cla-span">登录后获得更多特色功能·</div>
              <NavLink to="/login">立即登录</NavLink>
            </div>
          </div>
        </footer>
      </div>
    );
  }
}

export default Classify;
